<template>
  <div class="add-domain">
    <el-form
      :model="mainForm"
      :rules="mainRule"
      ref="mainForm"
      label-width="100px"
      v-if="!subFlag"
    >
      <el-form-item label="渠道" prop="channel_id">
        <el-select   v-model="mainForm.channel_id" clearable placeholder="渠道名称" filterable >
        <el-option
       v-for="item in callback_media_options"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select>
      </el-form-item>
      <el-form-item label="域名类型" prop="domain_type">
        <el-radio-group v-model="mainForm.domain_type" @change="changeMain">
          <el-radio label="hsr">华寿域名</el-radio>
          <el-radio label="proxy">代理域名</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="mainLabel" prop="media_agent_id">
        <el-select
          v-model="mainForm.media_agent_id"
          placeholder="请选择主体或代理商"
          filterable
        >
          <el-option
            v-for="item in mainMediaOptions"
            :key="item.id"
            :label="item.agent_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投放主域名" prop="main_domain">
        <el-input
          v-model="mainForm.main_domain"
          placeholder="请输入主域名"
          style="width: 215px"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 40px">
        <el-button type="primary" @click="submitForm('mainForm')"
          >保存</el-button
        >
        <el-button @click="quit()">取消</el-button>
      </el-form-item>
    </el-form>
    <el-form
      :model="sonForm"
      :rules="sonRule"
      ref="sonForm"
      label-width="100px"
      v-else
    >
      <el-form-item label="投放主域名" prop="main_domain_id">
        <el-input
          v-model="sonForm.main_domain"
          placeholder="请输入主域名"
          style="width: 215px; margin-right: 8px"
          disabled
        ></el-input>
        <el-button type="text" @click="createSub">生成子域名</el-button>
      </el-form-item>
      <el-form-item label="投放子域名" prop="sub_domain">
        <el-input
          v-model="sonForm.sub_domain"
          placeholder="请输入子域名"
          style="width: 215px"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 40px">
        <el-button type="primary" @click="submitForm('sonForm')"
          >保存</el-button
        >
        <el-button @click="quit()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getOptionListCs } from "@/api/order";
import {
  storeMain,
  mediaAgentList,
  detailDomain,
  generateSub,
  storeSub,
} from "@/api/domain.js";
export default {
  props: {
    subFlag: {},
    domain_id: {},
  },
  data() {
    return {
      mainLabel:'主体',
      callback_media_options: [],
      mainMediaOptions: [],
      sonForm: {
        main_domain_id: "",
        sub_domain: "",
        main_domain: "",
      },
      sonRule: {
        main_domain_id: [
          { required: true, message: "请输入主域名", trigger: "blur" },
        ],
        sub_domain: [
          { required: true, message: "请生成子域名", trigger: "blur" },
          {
            min: 5,
            max: 100,
            message: "长度在 5 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
      mainForm: {
        channel_id: "",
        domain_type: "",
        media_agent_id: "",
        main_domain: "",
      },
      mainRule: {
        channel_id: [
          { required: true, message: "请选择渠道", trigger: "change" },
        ],
        domain_type: [
          { required: true, message: "请选择域名类型", trigger: "change" },
        ],
        media_agent_id: [
          { required: true, message: "请选择主体或代理商", trigger: "change" },
        ],
        main_domain: [
          { required: true, message: "请输入主域名", trigger: "blur" },
          {
            min: 5,
            max: 100,
            message: "长度在 5 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeMain(e){
      e=='hsr'?this.mainLabel='主体':this.mainLabel='代理商'
    },
    createSub() {
      generateSub({ main_domain_id: this.domain_id }).then((res) => {
        this.sonForm.sub_domain = res.data.new_sub_domain;
      });
    },
    quit() {
      this.$emit("mainSumbit");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "sonForm") {
            let subForm = {};
            subForm.main_domain_id = this.sonForm.main_domain_id;
            subForm.sub_domain = this.sonForm.sub_domain;
            storeSub(subForm).then((res) => {
              this.$message.success("添加成功");
              this.$emit("mainSumbit",true);
            });
          } else {
            let subForm = {};
            subForm.channel_id = this.mainForm.channel_id;
            subForm.domain_type = this.mainForm.domain_type;
            subForm.media_agent_id = this.mainForm.media_agent_id;
            subForm.main_domain = this.mainForm.main_domain;
            if (this.mainForm.id) {
              subForm.id = this.mainForm.id;
            }
            storeMain(subForm).then((res) => {
              if (subForm.id) {
                this.$message.success("修改成功");
              } else {
                this.$message.success("添加成功");
              }
              this.$emit("mainSumbit",false);
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {
    domain_id: {
      handler(newV) {
        getOptionListCs().then((res) => {
          this.callback_media_options = res.data;
          if (newV) {
          detailDomain({ domain_id: newV }).then((res) => {
            console.log(res)
            this.mainForm.domain_type = res.data.domain_type;
            this.mainForm.id = res.data.id;
            this.mainForm.main_domain = res.data.main_domain;
            this.mainForm.media_agent_id=res.data.media_agent_id
            this.sonForm.main_domain_id = res.data.id;
            this.sonForm.main_domain = res.data.main_domain;
            this.mainForm.channel_id = res.data.channel_id
            this.mainForm.domain_type=='hsr'?this.mainLabel='主体':this.mainLabel='代理商'
          });
          // console.log(this.mainForm)
        }
        });
      },
      immediate: true,
    },
  },
  created() {
    mediaAgentList().then((res) => {
      this.mainMediaOptions = res.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.add-domain {
  margin: 0 auto;
}
</style>
